// import * as echarts from 'echarts';

// 初始化图表
let chartTwo = echarts.init(document.getElementById('main_two'));

// 加载动画
chartTwo.showLoading();

// 渲染分类商品数量统计图
function renderChartTwo(categoryData) {
    const categories = categoryData.map(item => item.category_name);
    const counts = categoryData.map(item => item.product_count);

    // 计算总数，用于计算百分比
    const total = counts.reduce((a, b) => a + b, 0);

    const option = {
        title: {
            text: '分类商品数量统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                const percent = ((params.value / total) * 100).toFixed(1);
                return `${params.name}<br/>
                        商品数量：${params.value}个<br/>
                        占比：${percent}%`;
            }
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            top: 'middle'
        },
        series: [{
            name: '商品数量',
            type: 'pie',
            roseType: 'radius',
            radius: ['20%', '70%'],
            center: ['60%', '50%'],
            itemStyle: {
                borderRadius: 8,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: true,
                formatter: function(params) {
                    return params.name + '\n' + params.value + '个';
                }
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '14',
                    fontWeight: 'bold'
                },
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            data: categories.map((category, index) => ({
                name: category,
                value: counts[index],
                itemStyle: {
                    color: getRandomColor(index)
                }
            }))
        }]
    };

    chartTwo.hideLoading();
    chartTwo.setOption(option);
}

// 生成随机渐变色
function getRandomColor(index) {
    const colors = [
        ['#FF9A9E', '#FAD0C4'],
        ['#A18CD1', '#FBC2EB'],
        ['#84FAB0', '#8FD3F4'],
        ['#FEE140', '#FA709A'],
        ['#FF9A9E', '#FECFEF'],
        ['#F6D365', '#FCE38A'],
        ['#FFE985', '#FA742B'],
        ['#5EE7DF', '#B490CA'],
        ['#D4FC79', '#96E6A1'],
        ['#FDA085', '#F6D365']
    ];
    
    const colorPair = colors[index % colors.length];
    return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
        {offset: 0, color: colorPair[0]},
        {offset: 1, color: colorPair[1]}
    ]);
}

// 监听窗口大小变化
window.addEventListener('resize', function() {
    chartTwo.resize();
});
